<template>
  <div>
    <ul>
       <li>
        <div class="header">
          <div>
            <img src="http://p1.music.126.net/x5vJO51AN3HMvM0SiyUyEg==/109951163189263114.jpg?imageView=1&type=webp&thumbnail=61x0" alt="">
          </div>
        </div>
        <div class="content">
          <div class="top">
            <div class="top_left">
              <p><span>巷子里的猫</span><span></span></p>
              <p class="time">2020年12月31日</p>
            </div>
            <div class="top_right">
              <span>3571</span>
              <i>
                <svg class="u-svg u-svg-unzancmt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg>
              </i>
            </div>
      
          </div>
          <div class="center">
            <p>世界上有一个人承认她是对的，她就从此偃旗息鼓，过去受过的委屈再也不提起。——《我不是潘金莲》

            </p>
          </div>
        </div>
      </li>
             <li>
        <div class="header">
          <div>
            <img src="http://p1.music.126.net/x5vJO51AN3HMvM0SiyUyEg==/109951163189263114.jpg?imageView=1&type=webp&thumbnail=61x0" alt="">
          </div>
        </div>
        <div class="content">
          <div class="top">
            <div class="top_left">
              <p><span>巷子里的猫</span><span></span></p>
              <p class="time">2020年12月31日</p>
            </div>
            <div class="top_right">
              <span>3571</span>
              <i>
                <svg class="u-svg u-svg-unzancmt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg>
              </i>
            </div>
      
          </div>
          <div class="center">
            <p>世界上有一个人承认她是对的，她就从此偃旗息鼓，过去受过的委屈再也不提起。——《我不是潘金莲》

            </p>
          </div>
        </div>
      </li>
             <li>
        <div class="header">
          <div>
            <img src="http://p1.music.126.net/x5vJO51AN3HMvM0SiyUyEg==/109951163189263114.jpg?imageView=1&type=webp&thumbnail=61x0" alt="">
          </div>
        </div>
        <div class="content">
          <div class="top">
            <div class="top_left">
              <p><span>巷子里的猫</span><span></span></p>
              <p class="time">2020年12月31日</p>
            </div>
            <div class="top_right">
              <span>3571</span>
              <i>
                <svg class="u-svg u-svg-unzancmt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill="#999" d="m25.857 14.752c-.015.059-1.506 5.867-2.932 8.813-1.162 2.402-3 2.436-3.099 2.436h-12.826v-13c3 0 5.728-4 5.728-7.275 0-3.725 1.433-3.725 2.142-3.725 1.327 0 1.978 1.345 1.978 4 0 2.872-.832 4.525-.839 4.537-.161.31-.155.682.027.981.181.299.5.482.849.482h6.942c.922 0 1.551.215 1.866.64.467.626.286 1.705.164 2.112m-23.857 10.248v-10c0-1.795.659-1.981.855-2h2.145v13h-2.173c-.829 0-.827-.648-.827-1m25.309-13.54c-.713-.969-1.886-1.46-3.482-1.46h-5.519c.26-.932.519-2.285.519-4 0-5.221-2.507-6-4-6-1.909 0-4.185.993-4.185 5.725 0 2.206-1.923 5.275-3.815 5.275h-4-.011c-1.034.011-2.816.862-2.816 4v10.02c0 1.198.675 2.979 2.827 2.979h16.971.035c.364 0 3.224-.113 4.894-3.564 1.514-3.127 3.01-8.942 3.056-9.14.071-.23.664-2.289-.474-3.836"></path></svg>
              </i>
            </div>
      
          </div>
          <div class="center">
            <p>世界上有一个人承认她是对的，她就从此偃旗息鼓，过去受过的委屈再也不提起。——《我不是潘金莲》

            </p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="stylus" scoped>
@import '~@a/stylus/border.styl'
  ul
    li
      display flex
      color #fff
      padding-top .1rem
      
      .header
        margin 0 0.1rem
        div
          width .32rem
          height .32rem
          img 
            width 100%
            height 100%
            display: block;
            border-radius: 50%;
      .content
        padding-bottom .1rem
        padding-right .1rem
        border_1px(0 0 1px 0)
        border-color: hsla(0,0%,100%,.1);
        .top
          display flex
          height .4rem
          .top_left
            flex 1 
            .username
              font-size .15rem
            .time
              font-size .13rem
              color #ffffff4D
          .top_right
            font-size .13rem
            color #999
            i   
              height .15rem
              width .15rem
              margin 0 .01rem
              svg 
                height .15rem
                width .15rem             
        .center
          p
            font-size .15rem
            line-height .26rem
    li:last-child
      .content
        border_1px(0 0 0 0)
</style>